<template>
	<view class="house_details_lease">
		<!-- banner -->
		<view class="sale_banner">
			<swiper class="swiper" @change="changeSwiper">
				<swiper-item v-for="(img,i) in detailsHouse.imagesArry" >
					<view class="swiper-item uni-bg-red">
						<image :src="img" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="sale_page">
				<text>{{currentNum}}</text>/<text>{{detailsHouse.imagesArry.length}}</text>
			</view>
		</view>
		<!-- 标题区 -->
		<view class="sale_data">
			<view class="sa_data_tit">
				<view style="display: flex;">
					<view class="data_tit_bac">
						<image class="bac_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/biao@2x.png'" mode=""></image>
						<text class="bac_txt">{{detailsHouse.type == 1? '整租':'合租'}}</text>
					</view>
					<text style="width: 500rpx;">{{detailsHouse.title}}</text> 
				</view>
			</text>
			<view class="sa_data_price">
				<text class="price_numm">{{detailsHouse.money || 0}} 元/月</text>
				<text class="price_type">
					支持多种付款形式
				</text>
			</view>
			<view class="sa_data_notice">
				<text>{{detailsHouse.created_at}}发布于{{detailsHouse.city}}</text>
				<text style="color: #FF765B;">{{detailsHouse.updated_at}}</text>
			</view>
			<view class="sa_tag_info">
				<view class="sa_tag_info_item" >
					<text style="font-size: 20rpx;">{{detailsHouse.more_option['户型']||'暂无户型信息'}}</text>
					<text>户型</text>
				</view>
				<view class="sa_tag_info_item" >
					<text>{{detailsHouse.area || 0}}平</text>
					<text>面积</text>
				</view>
				<view class="sa_tag_info_item" >
					<text>{{detailsHouse.storey}}</text>
					<text>楼层</text>
				</view>
				<view class="sa_tag_info_item" >
					<text>{{detailsHouse.direction}}</text>
					<text>朝向</text>
				</view>
			</view>
		</view>
 
		<!-- 基本介绍 -->
		<view class="essential_info">
			<text class="ess_info_tit">基本介绍</text>
			<view class="info_tit_address">
				<view class="in">小区信息：{{detailsHouse.community.community_address || '无'}}</view> 
				<u-icon @click="checkmap" name="map" class="ess_info_map" color="#2EA6E4" size="48"></u-icon>
			 </view> 
			<view v-html="detailsHouse.describe"></view>
			<!-- <view class="info_tit_address">
				<text>小区信息：历下区康虹路畅然居</text> 
				<u-icon name="map" class="ess_info_map" color="#2EA6E4" size="48"></u-icon>
			 </view> 
			 <view class="info_tit_introduce">
				 <text>最短三个月起租</text>
				 <text>内容介绍</text>
			 </view> -->
			 <view class="info_tit_tag">
				 <view class="tit_tag_item" v-for="(item,index) in detailsHouse.more_option['房屋配置']" :key="index">
					 <image class="tit_tag_item_img" :src="item" mode=""></image>
					 <text>{{index}}</text>
				 </view>
			 </view>
		</view>
		<!-- 细节展示 -->
	<!-- 	<view class="ess_display">
			<text class="ess_info_tit">细节展示</text>
			<view class="ess_display_con">
				<image src="https://community.chuangxiangdianli.com/images/neighborimg/maifang@2x.png'" mode=""></image>
			</view>
		</view> -->
		<!-- 为您推荐 -->
		<view class="ess_recommend" v-if="houseInfoList.length>0">
			<text class="ess_info_tit">为您推荐</text>
			<view class="ess_recommend_con">
				<houseList :houseInfoList="houseInfoList"></houseList>
			</view>
			<uLi-load-more  :status="loadingType" :contentText="contentText"></uLi-load-more>
		</view>
		<!-- 底部联系 -->
		<view class="see_footer">
			<view class="see_foo_fl">
				<image class="foo_fl_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/user.png'" mode=""></image>
				<text>{{detailsHouse.call}}</text>
			</view>
			<text @click="callphone" class="see_foo_fr">
				联系他
			</text>
		</view>
	</view>
	</view>
</template>

<script>
	import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more.vue"
	import houseList from '../common/houseList.vue'
	var timer = null;
	export default {
		components:{
			// 房屋id
			uLiLoadMore,
			houseList
		},
		onLoad(option) {
			this.houseId = option.id? option.id : '' 
		},
		onShow() {
			// 获取房屋详情
			this.getLeasedetails(this.houseId)
			this.getbuyhouse()
		},
		data() {
			return {
				loadingText: '加载中...',
				 loadingType: 'more',//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				 contentText: {
				        contentdown:'上拉显示更多',
				        contentrefresh: '正在加载...',
				        contentnomore: '没有更多数据了',
				},
				page:1,
				limit:10,
				houseId: null,
				currentNum: 1,
				// 房屋详情
				detailsHouse: {
					area: '',
					call: "",
					city: "",
					community: {community_id: '', community_address: "", city: '', community_name: ""},
					community_id: '',
					created_at: "",
					describe: "",
					direction: "",
					house_type: "",
					house_type1: "",
					id: '',
					image: "",
					images: "",
					location: "",
					money: "",
					more_option: {'房屋亮点': [""], '出租要求': [""], '是否有电梯': ''},
					pay_method: "",
					phone: "",
					renovation: "",
					storey: "",
					title: "",
					type: '',
					updated_at: "",
					user_id: '',
					username: ""
				}, 
				essentialInfoList: [{
						tit: '单价',
						deta: '12000元'
					},
					{
						tit: '楼层',
						deta: '中层'
					},
					{
						tit: '朝向',
						deta: '南北'
					},
					{
						tit: '装修',
						deta: '精装'
					},
					{
						tit: '预算',
						deta: '最低首付90万'
					},
					{
						tit: '类型',
						deta: '普通住宅'
					},
					{
						tit: '类型',
						deta: '普通住宅'
					},
					{
						tit: '年代',
						deta: '2017年'
					},
				],
				// 列表信息
				houseInfoList: [{
						area: null,
						community: {community_id:'' , community_name: ""},
						community_id: null,
						community_name: "",
						community_id: null,
						created_at: null,
						hall: null,
						imagesArry:[],
						house_type: "",
						id: null,
						image: "",
						money: "",
						room: null,
						title: "",
						toilet: null
					}]
			};
		},
		onReachBottom: function() {
			console.log(1)
			var that=this;
				//触底的时候请求数据，即为上拉加载更多
				//为了更加清楚的看到效果，添加了定时器
				console.log('上拉')
		       if (timer != null) {
		           clearTimeout(timer);
		       }
		       timer = setTimeout(function() {
				   if (that.loadingType !== 'more') {//loadingType!=0;直接返回
				                  return false;
				    }
				    that.loadingType = 'loading';
				    uni.showNavigationBarLoading();//显示加载动画
				   that.page++;
				   console.log(that.page)
		           that.getbuyhouse()
		       }, 1000);
					
		},
		methods: {
			changeSwiper(e) {
				this.currentNum = +e.detail.current + 1
			},
			checkmap(){
				uni.chooseLocation({
					latitude:'39.910725',
					longitude:'116.400017',
				    success: function (res) {
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
				    }
				});
			},
			// 获取房屋详情
			getLeasedetails(id){
				this.$http.get('Mini/circle/house/lease/' + id).then(res => { 
					if(res.code == 200){
						if(res.data.images.length>0){
							
							res.data.imagesArry=res.data.images.split(',');
						}
						this.detailsHouse = res.data
						console.log(this.detailsHouse)
					}
				})
			},
			callphone(){
				var that=this
				uni.makePhoneCall({
				    phoneNumber: that.detailsHouse.phone //仅为示例
				});
			},
			getbuyhouse(fx) {
				let data = {
					page: this.page,
					limit: this.limit,
					house_type: 'hot'
				}
				this.$http.get('Mini/circle/house/sell', data).then(res => {
					if (res.code == 200) {
						if(this.page>1){
							if(res.data.data.length>0){
								this.houseInfoList.push(...res.data.data)
							}else{
								this.loadingType = 'noMore';//将loadingType归0重置
								uni.hideNavigationBarLoading();//关闭加载动画
							}
						}else{
							this.houseInfoList = []
							this.houseInfoList=res.data.data
							uni.showNavigationBarLoading();
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}
					}else{
						uni.hideNavigationBarLoading();//关闭加载动画
						 uni.showNavigationBarLoading();
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					}
					if(fx){
						fx()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.house_details_lease {
		padding-bottom: 90rpx;
		background-color: #f7f8f9;

		.ess_info_tit {
			height: 120rpx;
			line-height: 120rpx;
			font-size: 38rpx;
			font-weight: 700;
		}

		.sale_banner {
			margin-top: 20rpx;
			position: relative;
			height: 406rpx;

			.swiper {
				height: 100%;

				.swiper-item {
					height: 100%;
				}
			}

			.sale_page {
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				color: #AFAFAF;
				background: #3E3E3E;
				opacity: 0.8;
				border-radius: 22rpx;

			}
		}

		.sale_data {
			padding: 40rpx 32rpx;
			margin-top: 16rpx;
			min-height: 429rpx;
			background-color: #fff;
			.sa_data_price{
				display: flex;
				justify-content: space-between;
				height: 119rpx;
				line-height: 119rpx;
				font-size: 26rpx;
				color: #9D9D9D;
				.price_numm{
					font-size: 42rpx;
					color: #ff6716;
					font-size: 700;
				}
			}
			.sa_data_tit {
				font-size: 39rpx;
				font-weight: 700;
				.data_tit_bac{
					margin-right: 10rpx;
					position: relative;
					width: 145rpx;
					height: 87rpx;
					line-height: 87rpx;
					text-align: center;
					color: #fff;
					font-size: 34rpx;
					.bac_txt{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}

			.sa_data_notice {
				padding: 0 25rpx; 
				margin-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #7F7F7F;
				background: #F7F8F9;
				border-radius: 10rpx;
			}

			.sa_tag_info {
				display: flex;
				height: 140rpx;

				.sa_tag_info_item {
					flex: 1;
					text-align: center;
					line-height: 68rpx;

					& text:nth-child(1) {
						display: block;
						font-size: 37rpx; 
						font-weight: 700;
					}
					& text:nth-child(2) { 
						font-size: 26rpx;  
						color: #666;
					}
				}
			}
		}

		.essential_info {
			position: relative;
			margin: 20rpx 0; 
			background-color: #fff;  
			.info_tit_address{
				margin-bottom: 10rpx;
				display: flex;
				justify-content: space-between;  
				.in{
					line-height: 40rpx;
				}
			}
			.info_tit_introduce{ 
				& text:nth-child(2){
					display: block;
				}
			}
			.info_tit_tag{
				display: flex;
				flex-wrap: wrap;
				.tit_tag_item{
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 16%; 
					text-align: center;
					.tit_tag_item_img{
						margin: 0 auto;
						width: 54rpx;
						height: 54rpx;
					}
				}
			}
		}

		.ess_display {
			padding: 0 30rpx;
			margin-top: 16rpx;
			height: 587rpx;
			background-color: #fff;

			.ess_display_con {
				height: 406rpx;
			}
		}

		.ess_recommend { 
			background-color: #fff;
		}

		.see_footer {
			position: fixed;
			width: calc(100% - 32px);
			bottom: 0;
			display: flex;
			justify-content: space-between; 
			height: 129rpx;
			line-height: 129rpx;
			background-color: #fff;

			.see_foo_fl {
				display: flex;

				.foo_fl_img {
					margin: auto 28rpx auto auto;
					width: 101rpx;
					height: 101rpx;
				}
			}

			.see_foo_fr {
				margin: auto 0;
				width: 196rpx;
				height: 81rpx;
				line-height: 81rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				background: #FF6716;
				border-radius: 10rpx;
			}
		}
	}
</style>
